<template>
  <div id="admin">
    <div class="admin-title">
      <div>新闻</div>
      <div class="button">
        <!-- <el-button type="primary" @click="addNews()">发布新闻</el-button> -->
        <el-button type="primary" @click="Rich_text" size="mini"
          >发布文章</el-button
        >
        <el-button type="primary" @click="changeTag" size="mini"
          >添加文章标签</el-button
        >
      </div>
    </div>
    <div class="admin-table">
      <el-table
        :data="tableData"
        height="250"
        stripe
        highlight-current-row
        :header-cell-style="{ background: '#efefef', color: '#000' }"
      >
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="date" label="封面" width="150" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.cover_image.length == 0">无封面</span>
            <img :src="imgURL(scope.row.cover_image[0].url)" v-else alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="200" align="center">
          <template slot-scope="scope">
            <el-tooltip
              :visible-arrow="false"
              class="item"
              effect="light"
              :content="scope.row.title"
              placement="bottom"
            >
              <span class="tab-line-max-show-css">
                {{ scope.row.title }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="manager_name"
          label="发布者"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <!-- @click="onClickRow(scope.row)" -->
            <span @click="onClickRow(scope.row)">
              <a style="color: #00a0e9; text-decoration: underline">{{
                scope.row.manager_name
              }}</a>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="180" align="center">
          <template slot-scope="scope">
            <!-- @click="onClickRow(scope.row)" -->
            <span
              v-for="(item, index) in scope.row.tags"
              :key="index"
              style="color: rgb(74 131 114)"
            >
              {{ item.tag_name }}/
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="reading_quantity"
          label="点击量"
          width="70"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="update_time"
          label="更新/创建时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="publish_time"
          label="发布时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="is_recommend"
          label="推荐"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.cover_image.length == 0">--</span>
            <i
              v-else-if="scope.row.is_recommend == 1"
              class="el-icon-check"
              style="color: rgb(4 166 66)"
            ></i>
            <img
              v-else
              style="width: 40px; display: block; margin: 0 auto"
              :src="
                $baseURL + 'img/2024/04/02/4f4cf03f4468d584e659d3b565b9bc1f.png'
              "
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="显示/隐藏新闻"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <i
              v-if="scope.row.status == 1"
              class="el-icon-check"
              style="color: rgb(4 166 66)"
            ></i>
            <img
              v-else
              style="width: 40px; display: block; margin: 0 auto"
              :src="dot"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="is_Home_page"
          label="轮播图"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.cover_image.length == 0">--</span>
            <i
              v-else-if="scope.row.is_Home_page == 1"
              class="el-icon-check"
              style="color: rgb(4 166 66)"
            ></i>
            <img
              v-else
              style="width: 40px; display: block; margin: 0 auto"
              :src="dot"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="is_style"
          label="单图显示"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.cover_image.length == 0">--</span>
            <i
              v-else-if="scope.row.is_style == 1"
              class="el-icon-check"
              style="color: rgb(4 166 66)"
            ></i>
            <img
              v-else
              style="width: 40px; display: block; margin: 0 auto"
              :src="dot"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="publish_time"
          label="查看"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-view"
              type="primary"
              @click="viewEssay(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-s-tools"
              type="success"
              @click="settingNews(scope.row)"
            />
            <el-button
              size="mini"
              icon="el-icon-edit-outline"
              @click="updateNews(scope.row)"
            />
            <el-button
              size="mini"
              icon="el-icon-delete"
              type="danger"
              @click="deleteNews(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <div style="padding-top: 5px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="dataTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 修改新闻对话框 -->
    <div class="updateNewsDialog">
      <el-dialog
        title="修改标题"
        :visible.sync="dialogVisibleUpdate"
        width="30%"
        :before-close="handleClose_update"
      >
        <el-form
          :model="eassyForm"
          ref="eassyForm"
          :rules="rules2"
          label-width="80px"
        >
          <el-row>
            <el-col :span="12"
              ><el-form-item label="标题" prop="title">
                <el-input v-model="eassyForm.title"></el-input>
              </el-form-item>
              <el-form-item label="摘要" prop="summary">
                <el-input
                  v-model="eassyForm.summary"
                  type="textarea"
                  :rows="2"
                ></el-input>
              </el-form-item>
              <el-form-item label="文章分类" prop="chooseTag">
                <el-tag
                  :key="tag.id"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose_tag(tag)"
                >
                  {{ tag.tag_name }}
                </el-tag>
                <el-select
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @change="handleInputConfirm"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.tag_name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  >+ 新标签</el-button
                >
              </el-form-item></el-col
            >
            <el-col :span="12"
              ><el-form-item label="封面" prop="cover_image">
                <el-upload
                  class="upload-demo"
                  drag
                  :action="upUrl"
                  :headers="header"
                  :on-success="handleAvatarSuccess"
                  multiple
                  :limit="3"
                  list-type="picture"
                  :file-list="displayImage"
                  :on-remove="deleteFeudal"
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    将文件拖到此处，或<em>点击上传</em>
                  </div>
                  <div class="el-upload__tip" slot="tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                </el-upload>
              </el-form-item></el-col
            >
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleUpdate = false">取 消</el-button>
          <el-button
            type="primary"
            @click="upUpdateNews('eassyForm', eassyForm)"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <!-- 标签对话框 -->
    <div class="tag_dialog">
      <el-dialog title="文章标签" :visible.sync="dialogTableVisible">
        <div class="addButton">
          <el-button
            size="small"
            type="primary"
            @click="(innerVisible = true), (isAdd = true)"
            ><i class="el-icon-plus" />新增
          </el-button>
        </div>
        <div>
          <el-table
            :data="gridData"
            stripe
            highlight-current-row
            :header-cell-style="{ background: '#efefef', color: '#000' }"
            height="300"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            >
            </el-table-column>
            <el-table-column
              property="tag_name"
              label="名称"
              width="150"
              align="center"
            ></el-table-column>
            <el-table-column
              property="description"
              label="描述"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  icon="el-icon-edit-outline"
                  @click="tadEdit(scope.row)"
                />
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="tagDelete(scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 新增/修改标签弹窗 -->
        <el-dialog
          width="30%"
          :title="isAdd ? '新增标签' : '修改标签'"
          :visible.sync="innerVisible"
          append-to-body
          :before-close="handleClose"
        >
          <el-form :model="form" ref="form" :rules="rules" label-width="80px">
            <el-form-item label="标签名称" prop="tag_name">
              <el-input v-model="form.tag_name" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="description">
              <el-input type="textarea" v-model="form.description"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addTag('form', form)"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </el-dialog>
    </div>

    <!-- 查看发布者信息对话框 -->
    <!-- readonly -->
    <div class="editorInfo">
      <el-dialog
        title="查看"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose_User"
      >
        <div>
          <el-form
            ref="managerForm"
            :inline="true"
            :model="managerForm"
            label-width="80px"
          >
            <el-form-item label="姓名" prop="name">
              <el-input v-model="managerForm.name" readonly></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="username">
              <el-input v-model="managerForm.username" readonly></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="managerForm.phone" readonly></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="managerForm.email" readonly></el-input>
            </el-form-item>
            <el-form-item label="身份">
              <div style="width: 552px">
                <el-tag
                  v-for="item in managerForm.roles"
                  :key="item.id"
                  type="success"
                  effect="dark"
                >
                  {{ item.rolename }}
                </el-tag>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>

    <div class="settingNews">
      <el-dialog
        title="设置新闻"
        :visible.sync="dialogVisible_setting"
        width="30%"
        :before-close="handleClose_setting"
      >
        <el-form
          ref="settingForm"
          :model="settingForm"
          label-width="80px"
          label-position="top"
        >
          <el-row :gutter="30">
            <el-col :span="12"
              ><el-form-item label="标题">
                <el-input v-model="settingForm.title" readonly></el-input>
              </el-form-item>

              <el-form-item label="设置为推荐" prop="is_recommend">
                <el-switch
                  prop="is_recommend"
                  v-model="settingForm.is_recommend"
                  :disabled="swiDis"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="开"
                  inactive-text="关"
                  @change="switch_tuijian"
                  active-color="#9966cc"
                ></el-switch>
              </el-form-item>
              <el-form-item label="设为轮播图" prop="is_Home_page">
                <el-switch
                  v-model="settingForm.is_Home_page"
                  :disabled="swiDis"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="开"
                  inactive-text="关"
                  @change="switch_lunbo"
                  active-color="#915c83"
                ></el-switch> </el-form-item
            ></el-col>
            <el-col :span="12">
              <el-form-item label="发布者">
                <el-input
                  v-model="settingForm.manager_name"
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="显示/隐藏 新闻" prop="status">
                <el-switch
                  v-model="settingForm.status"
                  @change="switch_shangjia"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="开"
                  inactive-text="关"
                  active-color="#b284be"
                ></el-switch>
              </el-form-item>
              <el-form-item label="单图样式" prop="is_style">
                <el-switch
                  v-model="settingForm.is_style"
                  @change="switch_style"
                  :disabled="swiDis"
                  :active-value="1"
                  :inactive-value="0"
                  active-text="开"
                  inactive-text="关"
                  active-color="#7cb9e8"
                ></el-switch> </el-form-item
            ></el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible_setting = false">取 消</el-button>
          <el-button type="primary" @click="upSettingNews('settingForm')"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import { mapGetters } from "vuex";
import {
  allnews,
  getTagList,
  updateTag,
  addTag,
  deleteTag,
  updateNews,
  deleteNews,
  updateNewsStatus,
} from "@/api/news";
import { getAdminDetail } from "@/api/administrator";
import baseURL from "@/config/index";
export default {
  name: "",

  data() {
    var checkwrite = (rules, value, text) => {
      const regRole =
        /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/;
      if (regRole.test(value)) {
        return text();
      }
      text(new Error("请输入正确的标签"));
    };
    var validateTag = (rule, value, callback) => {
      if (this.eassyForm.tags.length == 0) {
        callback(new Error("至少选择一个"));
      } else {
        callback();
      }
    };
    return {
      tableData: [],

      //发布新闻
      // dialogVisible: false,
      eassyForm: {},

      // 标签对话框
      dialogTableVisible: false,
      innerVisible: false, //内层对话框
      // 表单验证
      rules: {
        tag_name: [
          { required: true, min: 1, validator: checkwrite, trigger: "blur" },
        ],
      },
      rules2: {
        title: [
          { required: true, message: "请输入文章名称", trigger: "blur" },
          //  { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        summary: [
          { required: true, message: "请输入文章概述", trigger: "blur" },
        ],
        chooseTag: [
          {
            required: true,
            validator: validateTag,
            trigger: ["blur", "change"],
          },
        ],
      },
      // 表单
      form: {
        tag_name: "",
        description: "",
      },
      // 判断修改还是新增
      isAdd: true,
      // 标签对话框数据
      gridData: [],
      //页码
      currentPage: 1,
      pageData: {
        page: 1,
        size: 10,
      },
      // 总条数
      dataTotal: 0,
      //头像
      imageUrl: "",
      imageUrls: "",
      // 作者信息对话框
      dialogVisible: false,
      // 管理员信息
      managerForm: {},
      // 修改对话框
      dialogVisibleUpdate: false,
      dynamicTags: [],
      // 标签选择器数组
      options: [],
      //
      inputVisible: false,
      // 下拉选择框值
      inputValue: "",

      // 设置新闻
      // 关闭
      dialogVisible_setting: false,
      // 设置新闻表单
      settingForm: {},
      upSetting: { id: "" },
      // 开关经用
      swiDis: true,

      // 上传组件图片回显，仅用于回显
      displayImage: [],

      // 点  图片
      dot: baseURL + "img/2024/04/02/4f4cf03f4468d584e659d3b565b9bc1f.png",
    };
  },

  created() {
    // var data = {
    //   page: 1,
    //   size: 1,
    //   title: "闻",
    // };
    this.init();
    // 获取标签
    getTagList().then((res) => {
      this.gridData = res.data;
    });
  },

  computed: {
    ...mapGetters(["name"]),

    header() {},

    upUrl() {
      return baseURL + "admin/upload";
    },
  },

  methods: {
    init() {
      // 获取所有新闻
      allnews(this.pageData).then((res) => {
        this.tableData = res.data.data;
        this.dataTotal = res.data.total;
      });
    },

    // 关闭弹窗回调
    handleClose(done) {
      if (this.form.tag_name != "" || this.form.description != "") {
        this.$confirm("你还未提交信息，确认关闭？")
          .then((_) => {
            done();
            this.$refs.form.resetFields();
          })
          .catch((_) => {});
      } else {
        done();
      }
    },

    // 关闭修改对话框弹窗
    handleClose_update(done) {
      this.$confirm("你还未提交信息，确认关闭？")
        .then((_) => {
          done();
          this.$refs.eassyForm.resetFields();
        })
        .catch((_) => {
          done();
        });
    },

    // 关闭设置弹窗回调
    handleClose_setting(done) {
      this.$refs.settingForm.resetFields();
      this.upSetting = {};
      done();
    },

    // 关闭作者弹窗
    handleClose_User(done) {
      this.$refs.managerForm.resetFields();
      this.managerForm = {};
      done();
    },

    // 打开作者弹窗
    onClickRow(row) {
      var id = {
        id: row.manager_id,
      };
      getAdminDetail(id).then((res) => {
        this.managerForm = res.data;
      });
      this.dialogVisible = true;
    },

    //图片
    handleAvatarSuccess(res, file) {
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "图片上传成功",
        });
        // var imageUrls = baseURL + res.data;
        var imageUrls = res.data;
        var img = {
          url: imageUrls,
          name: file.name,
        };
        // this.form.cover_image.push(imageUrls);
        this.eassyForm.cover_image.push(img);
      } else {
        this.$message.error("上传失败");
      }
    },

    // 删除照片
    deleteFeudal(file) {
      // var deleteImg = baseURL + file.response.data;
      // var imageData = this.form.cover_image;
      // this.form.cover_image = imageData.filter((item) => item !== deleteImg);
      var deleteImg = file.url.replace(baseURL, "");
      var deleteImg2 = file.url;
      var imageData = this.eassyForm.cover_image;
      this.eassyForm.cover_image = imageData.filter(
        (item) => item.url !== deleteImg
      );
      this.displayImage = this.displayImage.filter(
        (item) => item.url !== deleteImg2
      );
    },

    //跳转到富文本
    Rich_text() {
      this.$router.push({
        name: "Tiny",
      });
    },

    //打开标签对话框
    changeTag() {
      this.dialogTableVisible = true;
    },

    // 修改标签
    tadEdit(row) {
      this.form = Object.assign({}, row);
      this.isAdd = false;
      this.innerVisible = true;
    },

    // 删除标签
    tagDelete(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "此操作将永久删除 "),
          h("i", { style: "color: teal" }, row.tag_name),
          h("span", null, "，是否继续？"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteTag(row).then((res) => {
            if (res.code == 0) {
              this.$message({
                type: "success",
                message: res.data,
              });
              this.changeTag();
            } else {
              this.$message({
                type: "danger",
                message: "发生错误无法删除",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 新增标签
    addTag(form, data) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.isAdd) {
            addTag(data).then((res) => {
              if (res.code == 0) {
                this.innerVisible = false;
                this.$message({
                  type: "success",
                  message: "你新增了一个标签",
                });
                this.$refs[form].resetFields();
                this.changeTag();
              }
            });
          } else {
            updateTag(data).then((res) => {
              if (res.code == 0) {
                this.innerVisible = false;
                this.$message({
                  type: "success",
                  message: "修改标签成功",
                });
                this.$refs[form].resetFields();
                this.changeTag();
              }
            });
          }
        } else {
          return false;
        }
      });
    },

    // 页码
    handleSizeChange(val) {
      this.pageData.size = val;
      this.init();
    },

    handleCurrentChange(val) {
      this.pageData.page = val;
      this.init();
    },

    // 查看文章
    viewEssay(row) {
      this.$router.push({
        name: "Tiny",
        params: {
          id: row.id,
        },
      });
    },

    // 删除文章
    deleteNews(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "此操作将永久删除 "),
          h("span", null, "该新闻"),
          h("span", null, "，是否继续？"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var id = {
            id: row.id,
          };
          deleteNews(id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.init();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 设置新闻
    settingNews(row) {
      if (row.cover_image.length == 0) {
        this.swiDis = true;
      } else {
        this.swiDis = false;
      }
      this.settingForm = row;
      // this.settingForm.id = row.id;
      // this.settingForm.id = row.id;
      // this.settingForm.id = row.id;
      // this.settingForm.id = row.id;
      this.upSetting.id = row.id;
      this.dialogVisible_setting = true;
    },

    //上传设置新闻
    upSettingNews(str) {
      if (Object.keys(this.upSetting).length < 2) {
        this.$refs[str].resetFields();
        this.dialogVisible_setting = false;
      } else {
        updateNewsStatus(this.upSetting).then((res) => {
          this.$refs[str].resetFields();
          this.$message({
            message: "设置成功",
            type: "success",
          });
          this.init();
          this.dialogVisible_setting = false;
        });
      }
    },

    // 更新新闻
    updateNews(row) {
      this.dialogVisibleUpdate = true;
      this.eassyForm = row;
      let displayImage = []; //displayImage仅用于回显，无其他意义
      if (row.cover_image.length != 0) {
        row.cover_image.forEach((element) => {
          var ele_picture = {
            name: element.name,
            status: element.status,
            uid: element.uid,
            url: baseURL + element.url,
          };
          displayImage.push(ele_picture);
        });
      }
      this.displayImage = displayImage;

      this.dynamicTags = row.tags;
      let tagIdentify = this.dynamicTags.map((item) => {
        return item.id;
      });
      const newArr = this.gridData.filter(
        (item) => !tagIdentify.includes(item.id)
      );
      this.options = newArr;
    },

    // 标签下拉框点击
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.focus();
      });
    },

    //标签下拉框发生改变
    handleInputConfirm() {
      let inputValue = this.inputValue;
      let item = this.options.find((item) => {
        return item.id == inputValue;
      });
      if (inputValue) {
        this.dynamicTags.push(item);
        this.options = this.options.filter(function (item) {
          return item.id !== inputValue;
        });
      }
      this.inputVisible = false;
      this.inputValue = "";
    },

    // 关闭tag
    handleClose_tag(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      this.options.push({
        id: tag.id,
        tag_name: tag.tag_name,
      });
    },

    // 提交修改的新闻，不包含富文本内容
    upUpdateNews(from, data) {
      const tag = this.dynamicTags.map((item) => item.id);
      data.tag_id = tag;
      this.$refs[from].validate((valid) => {
        if (valid) {
          updateNews(data).then((res) => {
            this.$refs[from].resetFields();
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.init();
            this.dialogVisibleUpdate = false;
          });
        } else {
          return false;
        }
      });
    },

    // 设置开关回调
    // 推荐value
    switch_tuijian(value) {
      this.upSetting.is_recommend = Number(value);
    },
    // 轮播图
    switch_lunbo(value) {
      this.upSetting.is_Home_page = Number(value);
    },
    // 上架/下架
    switch_shangjia(value) {
      this.upSetting.status = Number(value);
    },
    // 样式
    switch_style(value) {
      this.upSetting.is_style = Number(value);
    },

    // 图片路径
    imgURL(url) {
      return this.$baseURL + url;
    },
  },
};
</script>

<style lang="scss" scoped>
#admin {
  height: calc(100vh - 84px);
  width: 100%;
  background-color: rgb(255, 255, 255);

  // padding: 20px;

  .admin-title {
    width: calc(100% - 40px);
    height: 70px;
    box-sizing: border-box;
    border-bottom: 2px solid;
    border-image: linear-gradient(90deg, rgb(247, 0, 0) 0%, rgb(247, 0, 0) 100%)
      2 2 2 2;
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    div {
      line-height: 60px;
    }
  }
  .admin-table {
    width: 100%;
    height: calc(100vh - 154px);
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 10px 20px;

    img {
      width: 112px;
    }

    ::v-deep .el-table_3_column_19 {
      // el-tooltip
      .el-tooltip {
        word-break: keep-all;
      }
    }
    ::v-deep .el-tooltip {
      color: #333333;
    }
  }

  .tag_dialog {
    ::v-deep .el-dialog {
      min-width: 800px;

      .el-dialog__body {
        padding: 0px 20px 30px 20px;
      }
    }

    .addButton {
      padding-bottom: 8px;
    }
  }

  // 修改文章信息对话框
  ::v-deep .updateNewsDialog {
    .el-dialog {
      min-width: 860px;
      max-width: 860px;
      height: 431px;

      .el-dialog__body {
        height: 307px;
        padding: 0px 20px;
      }
      .el-tag + .el-tag {
        margin-left: 10px;
      }
      .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
      }
      .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
      }

      .el-upload-dragger {
        width: 280px;
        height: 140px;
      }
      .el-icon-upload {
        margin: 15px 0 0;
      }

      .el-upload__tip {
        margin-top: -20px;
      }

      .el-upload-list--picture {
        height: 110px;
        display: flex;

        .el-upload-list__item {
          width: 102px;
          margin-right: 10px;
        }
      }
    }
  }

  .editorInfo {
    ::v-deep .el-dialog {
      max-width: 672px;
      min-width: 672px;

      .el-form-item {
        width: 300px;

        .el-form-item__content {
          width: 220px;

          .el-tag {
            margin-right: 10px;
          }
        }
      }
    }
  }

  ::v-deep .el-dialog {
    min-width: 500px;
    margin-top: 5vh !important;
    max-height: calc(95vh - 20px);

    ::v-deep .el-dialog__body {
      overflow: auto;
      // max-height: calc(95vh - 20px);
      background-color: darkblue;
    }
  }
}
</style>